/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div>
  <div v-if="flag === 1" class="login-container">
    <el-form class="login-form" auto-complete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">{{$t('edge.login.title')}} </h3>
      <el-form-item prop="user_name">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user" />
        </span>
        <el-input class="login-input" name="user_name" type="text" v-model="loginForm.user_name" auto-complete="on" :placeholder="$t('edge.login.username')" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"></svg-icon>
        </span>
        <el-input class="login-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" auto-complete="on"
          :placeholder="$t('edge.login.password')" onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"></el-input>
          <span class="show-pwd" @click="showPwd">
            <!-- <svg-icon icon-class="eye" /> -->
            <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
          </span>
      </el-form-item>
      <div>
        <el-checkbox class="expand-text" v-model="isExpand">{{$t('edge.login.networkparam')}}</el-checkbox>
        <!-- <div style="display: inline;">本地登陆</div> -->
        <!-- <div style="display: inline;">
          <svg-icon icon-class="xiala" v-show="!isExpand"></svg-icon>
          <svg-icon icon-class="shanghe" v-show="isExpand"></svg-icon>
        </div> -->
      </div>
      <div v-show="isExpand">
        <el-form-item prop="ip">
          <span class="text-container">IP</span>
          <el-input class="login-input" name="IP" type="text" v-model="loginForm.ip" auto-complete="on" placeholder="" />
        </el-form-item>
        <el-form-item prop="port">
          <span class="text-container">{{$t('edge.login.port')}}</span>
          <el-input class="login-input" name="port" type="text" v-model="loginForm.port" auto-complete="on" placeholder="" />
        </el-form-item>
        <el-form-item prop="protocol">
          <span class="text-container">{{$t('edge.login.protocol')}}</span>
          <el-select v-model="loginForm.protocol" placeholder="">
            <el-option label="scp" value="scp"></el-option>
            <el-option label="ocp" value="ocp"></el-option>
          </el-select>
          <!-- <el-input class="login-input" name="protocol" type="text" v-model="loginForm.protocol" auto-complete="on" placeholder="" /> -->
        </el-form-item>
        <el-form-item prop="auth">
          <span class="text-container">{{$t('edge.login.auth')}}</span>
          <el-select v-model="loginForm.auth" clearable>
            <el-option :label="$t('edge.login.default')" :value="0"></el-option>
            <el-option label="v1" :value="1"></el-option>
            <el-option label="v2" :value="2"></el-option>
            <el-option label="v3" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="agentid">
          <span class="text-container">编号</span>
          <el-input class="login-input" name="agentid" type="text" v-model="loginForm.agentid" auto-complete="on" placeholder="" />
        </el-form-item> -->
        <div class="expand-text" style="float: right;" @click="resetParams">
            {{$t('edge.login.restoredefaultparameters')}}
        </div>
      </div>
        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
          {{$t('edge.login.login')}}
        </el-button>
    </el-form>
  </div>
  <!--修改密码弹框-->
  <div v-if="flag === 2" style="border:0px solid green;width:100%;height:10%;margin-bottom:0px;display:flex;justify-content:flex-end;">
    <div style="border:0px solid red;width:120px;height:100%;display:flex;justify-content:space-around;align-items:center;margin-top:18px;">
      <div class="isopen" style="border:0px solid red;font-size:14px;">
        <el-switch
          style="padding-left: 5px;"
          v-model="isOpen"
          :active-value="true"
          :inactive-value="false"
          @change="onSwitchChange"
          :active-text="$t('edge.main.dark')"
          active-color="#299BCC">
        </el-switch>
        <span style="margin-left:5px;">
        </span>
      </div>
    </div>
    <div style="border:0px solid yellow;width:140px;height:100%;display:flex;justify-content:center;aligin-items:center;line-height:5px;">
      <div style="border:0px solid yellow;margin-top:10px;">
        <el-dropdown-item command="switchTheme">
          <el-dropdown trigger="click" @command="switchLanguage">
            <span class="el-dropdown-link">
              {{ languageText}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="Ch">中文</el-dropdown-item>
              <el-dropdown-item command="En">English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-dropdown-item>
      </div>
    </div>
  </div>
  <div v-if="flag === 2" class="modify-container" style="position: fixed;height: 90%;width: 100%;display:flex;justify-content:center;align-items:center;border: 0px solid red;">
    <div  class="modify-passwd" style="border: 0px solid yellow;width:600px;">
      <h3 class="title">{{$t('edge.login.title')}} </h3>
      <div style="border: 0px solid red;width:100%;">
        <el-form
          class="dialog-footer"
          ref="tempPassword"
          :model="PasswordData"
          :rules="rules"
          label-position="right"
          label-width="auto"
          style='width: 100%;border:0px solid red;margin-top: -20px;'
        >
          <el-form-item
            label=""
            prop="pass"
          >
          </el-form-item>
          <el-form-item
            :label="$t('edge.login.username')"
            prop="pass"
          >
            <el-input
              :disabled="true"
              v-model="PasswordData.user_name"
            >
            </el-input>
          </el-form-item>
          <div class = "passCheck">
            <passCheck
              ref="checkPass"
              :newpassdata="PasswordData.newpass"
              @updateData="updatePassData"
            ></passCheck>
          </div>
          <el-form-item
            :label="$t('edge.auth.confirm')"
            prop="checknewpass"
          >
            <el-input
              type="password"
              v-model="PasswordData.checknewpass"
              placeholder=""
              onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-plus" style="width:100%;" type="primary" :loading="loading" @click.native.prevent="onCreatClick">
              {{$t('edge.login.createAdmin')}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <div class="bottomTimes">
    <span>{{$t('edge.about.version')}}：</span><span>{{version}}</span>
    <span>{{$t('edge.about.packedtime')}}：</span><span>{{ packedtime }}</span>
  </div>
  <changePass ref="changepassChild" @onGetStatus="onGetStatus"></changePass>
</div>
</template>

<script>
import passCheck from '../layout/components/passwordCheck.vue'
import { getMessageByCode } from '@/utils/responseMessage'
import { login, getInfo } from '../../api/login'
import { GetUsrPermissions } from '../../api/user'
import { SetSimuUserKey, setLanguage, getLanguage, getTheme, setTheme, setToken, setIframdevid, setPermissions, setUserRoles } from '@/utils/auth'
import changePass from '../layout/components/ChangePass'
import { AddDevice } from '@/api/control'
// import axios from 'axios'

export default {
  name: 'login',
  components: {
    passCheck,
    changePass
  },
  props: {
    loginInterface: {
      type: Object
    }
  },
  data () {
    var checkIp = (rule, value, callback) => {
      if (value === '') {
        return callback(
          new Error(this.$t('edge.login.enterip'))
        )
      }
      const ipReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      if (ipReg.test(value) || value === 'localhost') {
        this.ip_status = true
        callback()
      } else {
        this.ip_status = false
        return callback(
          new Error(this.$t('edge.login.enterlegalip'))
        )
      }
    }
    var checkPort = (rule, value, callback) => {
      if (value === '') {
        return callback(
          new Error(this.$t('edge.login.enterpport'))
        )
      }
      const portReg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
      setTimeout(() => {
        if (portReg.test(value)) {
          this.port_status = true
          callback()
        } else {
          this.port_status = false
          callback(
            new Error(this.$t('edge.login.entercorrectport'))
          )
        }
      }, 100)
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('edge.auth.inputpassagain')))
      } else if (value !== this.PasswordData.newpass) {
        callback(new Error(this.$t('edge.auth.twopassinconsistent')))
      } else {
        callback()
      }
    }
    return {
      packedtime: '', // 打包时间
      version: '',
      languageText: '语言',
      isOpen: true,
      flag: -1,
      loginForm: {
        user_name: '',
        password: '',
        ip: 'localhost',
        port: '8880',
        protocol: 'ocp',
        agentid: '0',
        auth: 3
      },
      loginRules: {
        user_name: [
          { required: true, trigger: 'blur', message: this.$t('edge.login.usernamenotnull') }
        ],
        password: [
          { required: true, trigger: 'blur', message: this.$t('edge.login.passnotnull') }
        ],
        protocol: [
          { required: true, message: this.$t('edge.login.selectagreement'), trigger: 'blur' }
        ],
        ip: [
          { validator: checkIp, trigger: 'blur' }
        ],
        port: [
          { validator: checkPort, trigger: 'blur' }
        ],
        agentid: [
          { required: true, message: this.$t('edge.login.enterdeviceid'), trigger: 'blur' }
        ]
      },
      loading: false,
      pwdType: 'password',
      language: 'Language',
      isExpand: false,
      user_name: '',
      PasswordData: {
        user_name: 'admin',
        pass: '',
        newpass: '',
        checknewpass: ''
      },
      rules: {
        pass: [{ required: true, message: this.$t('edge.auth.enterpass') }],
        newpass: [{ required: true, message: this.$t('edge.auth.enternewpass') }],
        checknewpass: [
          {
            required: true,
            validator: validatePass2,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.languageText = getLanguage() !== 'en' ? 'Language' : '语言'
    let theme = getTheme()
    this.isOpen = theme === 'dark'
    let json = require('../../../static/version.json')
    this.version = json.version
    if (PACKEDTIME) {
      this.packedtime = PACKEDTIME
    }
    if (!theme) {
      // set light
      this.switchToLight()
    }
  },
  mounted () {
    this.showLoginInfo()
  },
  methods: {
    onSwitchChange (val) {
      if (val) {
        this.switchToDark()
      } else {
        this.switchToLight()
      }
    },
    handleCommand (command) {
      switch (command) {
        case 'switchTheme':
          break
        case 'switchLanguage':
          break
        default: this.$route.push({ path: '/' })
      }
    },
    switchTheme (command) {
      switch (command) {
        case 'dark':
          this.switchToDark()
          break
        case 'light':
          this.switchToLight()
          break
        default:
          console.log(command)
          break
      }
    },
    onCreatClick () {
      let passwordCheck = this.$refs.checkPass
      let state = passwordCheck.checkNewPass()
      if (!state) {
        return
      }
      let changepassChild = this.$refs.changepassChild
      changepassChild.updateUser(this.PasswordData, false)
    },
    updatePassData (pass) {
      this.PasswordData.newpass = pass
    },
    onGetStatus (isFirstTime, language) {
      if (isFirstTime) {
        this.flag = 2
        if (getLanguage() === '') {
          setLanguage(language)
        }
      } else {
        this.flag = 1
      }
    },
    getInfo () {
      getInfo().then(data => {
        if (data.data.success !== true) {
          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
          return
        }
        this.userInfo = data.data.data
        let roleNames = this.userInfo.roleNames
        let userName = this.userInfo.user_name
        setUserRoles(roleNames)
        this.getUsrPermissions(userName)
      })
    },
    getUsrPermissions (userName) {
      GetUsrPermissions(userName).then(data => {
        if (data.data.success !== true) {
          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
          return
        }
        let permissions = data.data.data
        let permissionList = permissions.map(item => {
          return item.permission_code
        })
        // set cache
        setPermissions(permissionList)
      })
    },
    showLoginInfo () {
      // 从存储中获取登陆相关信息，并显示在表单
      let info = this.loginInterface.getLoginInfo()
      if (info) {
        info = JSON.parse(info)
        this.loginForm.user_name = info.user_name
        this.loginForm.ip = info.ip
        this.loginForm.port = info.port
        this.loginForm.protocol = info.protocol
        this.loginForm.auth = info.auth
      }
    },
    showPwd () {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          login(
            this.loginForm.user_name,
            this.loginForm.password
          )
            .then(data => {
              if (data.data.success !== true) {
                this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
                this.loading = false
                return
              }
              this.loading = false
              if (data.data.data.expire && data.data.data.token !== undefined) {
                setToken(data.data.data.token)
                // this.modifyPasswd()
                // return
              }
              SetSimuUserKey(this.loginForm.user_name)
              this.loginInterface.loginSucess(data.data.data.token)
              this.addDevice() // 注册设备
              this.loginInterface.setLoginInfo(this.loginForm) // 存储登陆信息
              this.getInfo()
            })
            .catch(err => {
              this.loading = false
              this.$message.error(err)
              this.loginInterface.loginFailed(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    switchLanguage (command) {
      switch (command) {
        case 'Ch':
          this.switchToChinese()
          break
        case 'En':
          this.switchToEngLish()
          break
        default:
          console.log(command)
          break
      }
    },
    // switchToChinese () {
    //   this.$i18n.locale = 'zh'
    //   setLanguage(this.$i18n.locale)
    // },
    // switchToEngLish () {
    //   this.$i18n.locale = 'en'
    //   setLanguage(this.$i18n.locale)
    // },
    modifyPasswd () {
      let changepassChild = this.$refs.changepassChild
      changepassChild.onChangePassClick(this.loginForm.user_name)
    },
    handleExpand () {
      this.isExpand = !this.isExpand
    },
    resetParams () {
      this.loginForm.ip = 'localhost'
      this.loginForm.port = '8880'
      this.loginForm.protocol = 'ocp'
      this.loginForm.agentid = '0'
      this.loginForm.auth = 3
    },
    addDevice () {
      let deviceInfo = {}
      deviceInfo.protocol = this.loginForm.protocol
      deviceInfo.ip = this.loginForm.ip
      deviceInfo.port = this.loginForm.port
      deviceInfo.type = 'asc'
      deviceInfo.agentid = this.loginForm.agentid
      if (this.loginForm.auth !== '') {
        deviceInfo.auth = this.loginForm.auth
      }
      setIframdevid(this.loginForm.agentid)
      AddDevice(deviceInfo).then(res => {
        if (!res.data.success) {
          console.log(new Error(res.data.message))
          this.$message({
            message: res.data.message,
            type: 'error',
            duration: 1 * 1000
          })
        }
      })
    },
    switchToDark () {
      setTheme('dark')
      location.reload()
    },
    switchToLight () {
      setTheme('light')
      location.reload()
    },
    switchToChinese () {
      this.$i18n.locale = 'zh'
      setLanguage(this.$i18n.locale)
      location.reload()
    },
    switchToEngLish () {
      this.$i18n.locale = 'en'
      setLanguage(this.$i18n.locale)
      location.reload()
    }
  }
}
</script>

<style lang="scss">
.modify-container >>> .el-form-item__label {
  width: 194px;
}
.modify-container >>> .el-form-item__content {
  width: 400px;
}
</style>
